<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#104E8B"
      text-color="#fff"
      active-text-color="#104E8B"
      router
    >
      <template v-for="item in items">
        <template v-if="item.subs">
          <el-submenu :index="item.index" :key="item.index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                <template slot="title">{{ subItem.title }}</template>
                <el-menu-item
                  v-for="(threeItem,i) in subItem.subs"
                  :key="i"
                  :index="threeItem.index"
                >{{ threeItem.title }}</el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import bus from '../common/bus';
export default {
  data () {
    var functionItems = []
    // if (localStorage.getItem('CurrentService') === '001') {
    //   functionItems = [{
    //     icon: 'el-icon-location',
    //     index: 'VehicleHome',
    //     title: '实时监控'
    //   },
    //   {
    //     icon: 'el-icon-s-opportunity',
    //     index: 'VehicleAlert',
    //     title: '报警信息'
    //   },
    //   {
    //     icon: 'el-icon-s-data',
    //     index: 'VehicleDataV',
    //     title: '数据看板'
    //   },
    //   {
    //     icon: 'el-icon-search',
    //     index: 'Query',
    //     title: '信息查询',
    //     subs: [
    //       {
    //         index: 'VehicleQueryAlarm',
    //         title: '报警信息'
    //       },
    //       {
    //         index: 'VehicleQueryHistoryInfo',
    //         title: '历史轨迹查询'
    //       },
    //       {
    //         index: 'VehicleQueryStayLocation',
    //         title: '停留位置查询'
    //       },
    //       {
    //         index: 'VehicleQueryIsRun',
    //         title: '移动状态查询'
    //       },
    //       {
    //         index: 'VehicleQueryDriveDistance',
    //         title: '当日累计出车统计'
    //       },
    //       {
    //         index: 'VehicleWork',
    //         title: '真实作业轨迹回放',
    //         subs:[
    //           {
    //             index: 'VehicleWorkTrack',
    //             title: '真实道路作业轨迹回放'
    //           },
    //           {
    //             index: 'VehicleWorkTrackVehicle',
    //             title: '真实车辆作业轨迹回放'
    //           }]
    //       }]
    //   },
    //   {
    //     icon: 'el-icon-s-order',
    //     index: 'Excel',
    //     title: '统计报表',
    //     subs: [
    //       {
    //         index: 'ExcelCarWorkInfo',
    //         title: '车辆作业统计'
    //       },
    //       {
    //         index: 'ExcelRoadWorkInfo',
    //         title: '道路作业统计'
    //       },
    //       {
    //         index: 'ExcelRoadAssess',
    //         title: '道路考核统计'
    //       },
    //       {
    //         index: 'ExcelUnMoveCar',
    //         title: '未出动车辆统计'
    //       },
    //       {
    //         index: 'ExcelVehicleCheckInfo',
    //         title: '车辆行驶时长里程统计'
    //       }, {
    //         index: 'ExcelVehiclePoint',
    //         title: '车辆绩效评分统计'
    //       }
    //     ]
    //   }
    //   ]
    // }
    // if (localStorage.getItem('CurrentService') === '003') {
    //   functionItems = [{
    //     icon: 'el-icon-location',
    //     index: 'RubbishHome',
    //     title: '实时监控'
    //   },
    //   {
    //     icon: 'el-icon-s-opportunity',
    //     index: 'RubbishAlert',
    //     title: '报警信息'
    //   },
    //   {
    //     icon: 'el-icon-s-data',
    //     index: 'RubbishDataV',
    //     title: '数据看板'
    //   },
    //   {
    //     icon: 'el-icon-s-data',
    //     index: 'ZZZDevice',
    //     title: '转运站抓拍'
    //   },
    //   {
    //     icon: 'el-icon-search',
    //     index: 'Query',
    //     title: '信息查询',
    //     subs: [
    //       {
    //         index: 'RubbishQueryAlarm',
    //         title: '报警信息'
    //       },
    //       {
    //         index: 'VehicleQueryHistoryInfo',
    //         title: '历史轨迹查询'
    //       },
    //       {
    //         index: 'VehicleQueryStayLocation',
    //         title: '停留位置查询'
    //       },
    //       {
    //         index: 'VehicleQueryIsRun',
    //         title: '移动状态查询'
    //       },
    //       {
    //         index: 'VehicleQueryDriveDistance',
    //         title: '当日累计出车统计'
    //       }]
    //   },
    //   {
    //     icon: 'el-icon-s-order',
    //     index: 'Excel',
    //     title: '统计报表',
    //     subs: [{
    //       index: 'ExcelWorkPoint',
    //       title: '作业点统计'
    //     },
    //     {

    //       index: 'ExcelWorkCar',
    //       title: '作业车辆统计'
    //     },
    //     {

    //       index: 'ExcelOmitPoint',
    //       title: '遗漏点位统计'
    //     },
    //     {
    //       index: 'ExcelRubbishCheckInfo',
    //       title: '车辆行驶时长里程统计'
    //     }, {
    //         index: 'ExcelRubbishPoint',
    //         title: '车辆绩效评分统计'
    //       }]
    //   },
    //   {
    //     icon: 'el-icon-place',
    //     index: 'rubbishThePlayback',
    //     title: '垃圾点收集遗漏轨迹图'
    //   }]
    // }
    // if (localStorage.getItem('CurrentService') === '006') {
    //   functionItems = [{
    //     icon: 'el-icon-location',
    //     index: 'ComprehensiveHome',
    //     title: '实时监控'
    //   }, {
    //     icon: 'el-icon-s-opportunity',
    //     index: 'ComprehensiveAlert',
    //     title: '报警信息'
    //   },
    //   {
    //     icon: 'el-icon-s-data',
    //     index: 'ComprehensiveDataV',
    //     title: '数据看板'
    //   },
    //   {
    //     icon: 'el-icon-s-order',
    //     index: 'Basic',
    //     title: '基础信息管理',
    //     subs: [
    //       {
    //         index: 'SettingWorker',
    //         title: '人员管理'
    //       },
    //       {
    //         index: 'SettingTeam',
    //         title: '班组作业道路管理'
    //       },
    //       {
    //         index: 'SettingRoad',
    //         title: '人员作业道路管理'
    //       },
    //       {
    //         icon: 'el-icon-truck',
    //         index: 'CarServeHome',
    //         title: '车辆基础信息管理'
    //       }, {
    //         index: '404',
    //         title: '司机基础信息管理'
    //       }, {
    //         index: '404',
    //         title: '设施基础信息管理'
    //       }]
    //   }]
    // }
    // if (localStorage.getItem('CurrentService') === '002') {
    //   functionItems = [{
    //     icon: 'el-icon-location',
    //     index: 'WorkerHome',
    //     title: '实时监控'
    //   }, {
    //     icon: 'el-icon-s-opportunity',
    //     index: 'WorkerAlert',
    //     title: '报警信息'
    //   }, {
    //     icon: 'el-icon-s-data',
    //     index: 'WorkerDataV',
    //     title: '数据看板'
    //   },
    //   {
    //     icon: 'el-icon-search',
    //     index: 'Query',
    //     title: '信息查询',
    //     subs: [
    //       {
    //         index: 'WorkerHistoryInfo',
    //         title: '历史轨迹查询'
    //       }]
    //   },
    //   {
    //     icon: 'el-icon-s-order',
    //     index: 'Excel',
    //     title: '统计报表',
    //     subs: [
    //       {
    //         index: 'ExcelBZZPatrol',
    //         title: '班组长巡逻统计'
    //       },
    //       {
    //         index: 'ExcelBZZWork',
    //         title: '班组长作业统计'
    //       },
    //       {
    //         index: 'ExcelWorkerWork',
    //         title: '环卫工作业统计'
    //       },
    //       {
    //         index: 'ExcelWorkerRoadWorkInfo',
    //         title: '人工道路作业统计'
    //       },
    //       {
    //         index: 'ExcelWorkerRoadUnWorkInfo',
    //         title: '人工道路未作业统计'
    //       },
    //       {
    //         index: 'ExcelWorkerPoint',
    //         title: '环卫工绩效评分统计'
    //       },
    //       {
    //         index: 'ExcelWorkerTeamRank',
    //         title: '环卫队工绩效评分排名'
    //       }]
    //   },
    //   {
    //     icon: 'el-icon-s-order',
    //     index: 'Attendance',
    //     title: '考勤管理',
    //     subs: [
    //       {
    //         index: 'WorkerAttendanceDay',
    //         title: '考勤记录（日）'
    //       },
    //       {
    //         index: 'WorkerAttendanceMonth',
    //         title: '考勤记录（月）'
    //       },
    //       {
    //         index: 'WorkerAttendanceSetting',
    //         title: '工作时间设置'
    //       }]
    //   },
    //   {
    //     icon: 'el-icon-s-order',
    //     index: 'Basic',
    //     title: '基础信息管理',
    //     subs: [
    //       {
    //         index: 'SettingWorker',
    //         title: '人员管理'
    //       },
    //       {
    //         index: 'SettingTeam',
    //         title: '组织机构管理'
    //       },
    //       {
    //         index: 'SettingRoad',
    //         title: '人员作业道路管理'
    //       }]
    //   }
    //   ]
    // }
    // if (localStorage.getItem('CurrentService') === '005') {
    //   functionItems = [{
    //     icon: 'el-icon-truck',
    //     index: 'CarServeHome',
    //     title: '车辆基础信息管理'
    //   }, {
    //     icon: 'el-icon-odometer',
    //     index: 'History',
    //     title: '车务管理',
    //     subs: [
    //       {
    //         index: '404',
    //         title: '车检记录'
    //       },
    //       {
    //         index: '404',
    //         title: '车险记录'
    //       },
    //       {
    //         index: '404',
    //         title: '维修记录'
    //       },
    //       {
    //         index: '404',
    //         title: '保养记录'
    //       },
    //       {
    //         index: '404',
    //         title: '加油记录'
    //       },
    //       {
    //         index: '404',
    //         title: '违章记录'
    //       },
    //       {
    //         index: '404',
    //         title: '违规记录'
    //       },
    //       {
    //         index: '404',
    //         title: '加水记录'
    //       }]
    //   }, {
    //     icon: 'el-icon-s-custom',
    //     index: 'Driver',
    //     title: '司机管理',
    //     subs: [
    //       {
    //         index: '404',
    //         title: '司机基础信息管理'
    //       },
    //       {
    //         index: '404',
    //         title: '驾驶记录'
    //       },
    //       {
    //         index: '404',
    //         title: '违章记录'
    //       },
    //       {
    //         index: '404',
    //         title: '违规记录'
    //       }]
    //   }, {
    //     icon: 'el-icon-position',
    //     index: 'Travel',
    //     title: '行驶管理',
    //     subs: [
    //       {
    //         index: '404',
    //         title: '工作区域'
    //       },
    //       {
    //         index: '404',
    //         title: '超速规定'
    //       }]
    //   }, {
    //     icon: 'el-icon-s-data',
    //     index: 'CarServeDataV',
    //     title: '数据看板'
    //   }, {
    //     icon: 'el-icon-s-order',
    //     index: 'Excel',
    //     title: '统计报表',
    //     subs: [{
    //       icon: 'el-icon-s-order',
    //       index: 'Expenditure',
    //       title: '费用统计',
    //       subs: [
    //         {
    //           index: 'ExcelExpenditureAlone',
    //           title: '单一车辆费用统计'
    //         },
    //         {
    //           index: 'ExcelExpenditureAll',
    //           title: '全部车辆费用统计'
    //         },
    //         {
    //           index: 'ExcelExpenditureComprehensive',
    //           title: '综合车辆费用统计'
    //         }]
    //     }, {
    //       icon: 'el-icon-s-order',
    //       index: 'FuelConsumption',
    //       title: '油耗里程统计',
    //       subs: [
    //         {
    //           index: 'ExcelFuelConsumptionAlone',
    //           title: '单一车辆油耗里程统计'
    //         },
    //         {
    //           index: 'ExcelFuelConsumptionAll',
    //           title: '全部车辆油耗里程统计'
    //         },
    //         {
    //           index: 'ExcelFuelConsumptionComprehensive',
    //           title: '综合车辆油耗里程统计'
    //         }]
    //     }, {
    //       icon: 'el-icon-s-order',
    //       index: 'Water',
    //       title: '加水统计',
    //       subs: [
    //         {
    //           index: 'ExcelWaterAlone',
    //           title: '单一车辆加水统计'
    //         },
    //         {
    //           index: 'ExcelWaterAll',
    //           title: '全部车辆加水统计'
    //         },
    //         {
    //           index: 'ExcelWaterComprehensive',
    //           title: '综合车辆加水统计'
    //         }]
    //     },
    //     {
    //       index: 'ExcelUseOf',
    //       title: '车辆用车统计'
    //     },
    //     {
    //       index: 'ExcelDispatch',
    //       title: '司机出车统计'
    //     }
    //     ]
    //   }
    //   ]
    // }
    // if (localStorage.getItem('CurrentService') === '004') {
    //   functionItems = [{
    //     icon: 'el-icon-location',
    //     index: 'WCHome',
    //     title: '实时监控'
    //   }, {
    //     icon: 'el-icon-s-data',
    //     index: 'WCDataV',
    //     title: '数据看板'
    //   },
    //   {
    //     icon: 'el-icon-s-order',
    //     index: 'Excel',
    //     title: '统计报表',
    //     subs: [{
    //         index: 'ExcelWCPoint',
    //         title: '绩效评分统计'
    //       }]
    //   }]
    // }
    // if (localStorage.getItem('CurrentService') === '007') {
    //   functionItems = [{
    //     icon: 'el-icon-location',
    //     index: 'RoleManage',
    //     title: '角色管理'
    //   }, {
    //     icon: 'el-icon-location',
    //     index: 'AccountManage',
    //     title: '账户管理'
    //   }]
    // }
    return {
      collapse: false,
      // items: functionItems
      items: []
    };
  },
  computed: {
    onRoutes () {
      return this.$route.path.replace('/', '');
    }
  },
  created () {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on('collapse', msg => {
      this.collapse = msg;
      bus.$emit('collapse-content', msg);
    });
    this.getpermissions()
  },
  methods: {
    // 获取菜单列表
    async getpermissions(){
      const params = {
        userName: localStorage.getItem('LOGIN_NAME'),
        // userName: 'JSCESHI',
        menuID: localStorage.getItem('CurrentService'),
      }
      const { data } = await this.$Http.get('Role/GetFunctionList', { params })
      this.items = Object.assign([],data)
      return data.filter(item=>{
           if(item.subs.length == 0){
               item.subs = undefined
           }else {
               subs.filter(items=>{
                   if( items.subs.length == 0){
                       items.subs = undefined
                   }
               })
           }
       })
    },
  }
};
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 3.646vw;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 13.021vw;
}
.sidebar > ul {
  height: 100%;
}
/* .el-menu-item {
  font-weight: bold;
} */
.el-menu-item.is-active {
  font-weight: bold;
  /* background-color: #0d3e6f !important; */
  /* background-color: #123a63 !important; */
  background-color: #e8f3ff !important;
  /* border-style:solid; */
  /* border-width:0.104vw; */
  /* border-color:rgb(14, 43, 71) ; */
  border-right-style:solid;
  border-width:0.26vw;
  /* border-color:rgb(237, 239, 240) ; */
  border-color:#0d3e6f  ;
  box-sizing: border-box;
}
</style>
